<script>
export default {
  data() {
    return {
      dialogOption: {
        dialogVisible: false
      },
      param: {
        content: {
          keyword: null
        }
      },
      form: {
        name: null,
        file: null
      },
      tableList: {
        item: null,
        data:[]
      },
    }
  },
  mounted() {
    this.fetchData()
  },
  methods: {
    queryButtonClick: function () {
      this.fetchData()
    },
    fetchData: function () {
      this.$axios({url:'/ems/client/base/report/template/list',data: this.param}).then((content) => {
        this.tableList.data = content.list
      });
    },
    fileFilter: function (name) {
      if (!name) {
        return false
      }
      if (name.toString().toLowerCase().indexOf('xls') < 0) {
        window.___vue.$message.warning('仅支持xls文件')
        return false
      }
      return true
    },
    submit: function () {
      const form = this.form
      this.$refs.form.validate(valid => {
        if (valid) {
          const files = document.getElementById('uploadFile');
          const fileFilter = this.fileFilter(files.files[0].name);
          if (!fileFilter) {
            return
          }
          this.dialogOption.dialogVisible = false
          const formData = new FormData()
          formData.append('name', form.name)
          formData.append('file', document.getElementById('uploadFile').files[0])
          this.$axios({url: '/ems/client/base/report/template/update', data: formData}).then(rsp => {
            console.log(rsp)
            this.fetchData()
          })
        }
      })
    },
    downloadFile: function (item) {
      window.open('/ems/client/base/report/template/download/file?id=' + item.id)
    },
    removeFile: function (item) {
      const formData = new FormData()
      formData.append('id', item.id)
      this.$axios({url: '/ems/client/base/report/template/delete', data: formData}).then(rsp => {
        console.log(rsp)
        this.fetchData()
      })
    }
  },
  components: {
  }
}
</script>

<template>
  <div>
    <div>
      <el-row>
        <el-col :span="24">
          <label>名称：</label><el-input v-model="param.content.keyword" placeholder="请输入内容" style="width: 200px"></el-input>
          &nbsp;
          <el-button type="primary" plain @click="queryButtonClick">查询</el-button>
          &nbsp;
          <el-button type="primary" plain @click="dialogOption.dialogVisible=true">添加模板</el-button>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24" style="margin-top: 20px;">
          <el-table
              :data="tableList.data"
              border
              style="width: 100%">
            <el-table-column align="center" prop="id"  label="ID" width="150"></el-table-column>
            <el-table-column  prop="name"  label="模板名称"></el-table-column>
            <el-table-column  prop="fileName"  label="文件名称"></el-table-column>
            <el-table-column  prop="updateTimeDesc"  label="更新时间"></el-table-column>
            <el-table-column  prop="createTimeDesc"  label="创建时间"></el-table-column>
            <el-table-column
                fixed="right"
                label="操作">
              <template slot-scope="scope">
                <el-button @click="downloadFile(scope.row)" type="text" size="small">下载模板</el-button>
                <el-button @click="removeFile(scope.row)" type="text" size="small">删除</el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-col>
      </el-row>
    </div>
    <el-dialog :visible.sync="dialogOption.dialogVisible" width="400px">
      <el-form ref="form" :model="form" label-width="80px">
        <el-form-item label="模板名称">
          <el-input v-model="form.name" placeholder="默认文件名"></el-input>
        </el-form-item>
        <el-form-item v-model="form.file" label="上传文件" :rules="[{ required: true, message: '不能为空'}]">
          <el-input type="file" v-model="form.file" id="uploadFile"></el-input>
        </el-form-item>
      </el-form>
      <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="submit" type="primary">保存</el-button>
        <el-button @click="dialogOption.dialogVisible = false">关闭</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<style>

</style>
